<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="留样详情">
        <template slot="btn">
          <el-button class="filter-item" plain="" icon="el-icon-refresh-left" size="small"
            @click="handleBack">返回
          </el-button>
        </template>
      </modules-title>
    </div>
    <div style="padding:20px" class="optionLog-component">
      <div class="title-container">
        <div class="left">
          <p class="title-con"><span>基本信息</span></p>
        </div>
      </div>
      <el-form label-width="120px" size="small" label-position="left">
        <el-row :gutter="80">

          <el-col :span="8">
            <el-form-item label="所属项目：">
              <span>{{form.project_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样编号：">
              <span>{{form.reserve_sample_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样位置名称：">
              <span>{{form.location_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样包装：">
              <span>{{form.packaging}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样有效期：">
              <span>{{form.expiry_date}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样数量：">
              <span>{{form.num}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="留样状态：">
              <span v-if="form.status==0">已留样</span>
              <span v-if="form.status==1">留样销毁审批中</span>
              <span v-if="form.status==2">已销毁</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="销毁理由/原因：">
              <span>{{form.destruction_reason}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="销毁审批意见：">
              <span>{{form.destruction_advice}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="检验负责人">
              <span v-if="form.inspection_user!=null">{{form.inspection_user.name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="请检人:">
              <span
                v-if="form.apply_inspection_user!=null">{{form.apply_inspection_user.name}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding:20px" class="optionLog-component">
      <div class="title-container">
        <div class="left">
          <p class="title-con"><span>样品信息</span></p>
        </div>
      </div>
      <el-form label-width="110px" size="small" label-position="left">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="样品名称：">
              <span v-if="form.sample_info!=null">{{form.sample_info.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="样品类别名称：">
              <span v-if="form.sample_info!=null">{{form.sample_info.sample_type_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格：">
              <span v-if="form.sample_info!=null">{{form.sample_info.attr}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="CAS：">
              <span v-if="form.sample_info!=null">{{form.sample_info.cas}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="供应商：">
              <span v-if="form.sample_info!=null">{{form.sample_info.supplier}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生产商：">
              <span v-if="form.sample_info!=null">{{form.sample_info.producer}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="批号：">
              <span v-if="form.sample_info!=null">{{form.sample_info.batch_number}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产日期：">
              <span v-if="form.sample_info!=null">{{form.sample_info.production_date}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sampleDetail, sampleFlowDetail } from "@/api/samples";
export default {
  data() {
    return {
      form: {
        inspection_user: {},
        sample_info: {},
        apply_inspection_user: {}
      }
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},
  //属性是手动定义的所需监听的值
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.handlData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    //获取数据
    handlData() {
      let commit = undefined,
        id = "";
      if (this.$route.query.id) {
        commit = sampleDetail;
        id = this.$route.query.id;
      }
      if (this.$route.query.f_id) {
        commit = sampleFlowDetail;
        id = this.$route.query.f_id;
      }
      if (id !== "") {
        commit(id).then(res => {
          if (res.code === 200) {
            this.form = res.data;
          }
        });
      }
    },

    //返回
    handleBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/assets/scss/views/sampleInspection/log.scss";
::v-deep .pagination-container {
  padding: 0 !important;
}
</style>